<template>
  <view class="wrapper" v-if="detail">
    <view @click="changeVuex">vuex:{{ list }}</view>
    <!-- 商品图片 -->
    <swiper
      class="pics"
      indicator-dots
      indicator-color="rgba(255, 255, 255, 0.6)"
      indicator-active-color="#fff"
    >
      <swiper-item v-for="(item, i) in detail.pics" :key="i">
        <image :src="item.pics_big_url" />
      </swiper-item>
    </swiper>
    <!-- 基本信息 -->
    <view class="meta">
      <view class="price">￥{{ detail.goods_price }}</view>
      <view class="name">{{ detail.goods_name }}</view>
      <view class="shipment">快递: 免运费</view>
      <text class="collect icon-star">收藏</text>
    </view>
    <!-- 商品详情 -->
    <view class="detail">
      <view v-html="detail.goods_introduce"></view>
    </view>
    <!-- 操作 -->
    <view class="action">
      <button open-type="contact" class="icon-handset">联系客服</button>
      <!-- 显示购物车商品数量 -->
      <text v-if="carts.length" class="add-count">
        {{ counts }}
      </text>
      <text class="cart icon-cart" @click="goCart">购物车</text>
      <text class="add" @click="addCart">加入购物车</text>
      <text class="buy" @click="createOrder">立即购买</text>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  data () {
    return {
      // 商品详情数据
      detail: null,
      carts: uni.getStorageSync("carts") || []
    }
  },
  onLoad (c) {
    this.getGoods(c.id)
  },
  computed: {
    ...mapState('cart', ['list']),
    counts () {
      return this.carts.reduce((acc, good) => acc += good.goods_count, 0)
    }
  },
  watch: {
    carts: {
      deep: true,
      handler () {
        // 存储本地
        uni.setStorageSync("carts", this.carts)
      }
    }
  },
  methods: {
    async getGoods (goods_id) {
      const { msg, data } = await this.request({
        url: "/api/public/v1/goods/detail",
        data: { goods_id }
      })
      console.log(msg, data)
      if (msg.status === 200) {
        this.detail = data
      }
    },
    addCart () {
      // 判断是否添加过
      let good = this.carts.find(item => item.goods_id === this.detail.goods_id)

      // 没有=》新增
      if (!good) {
        const {
          goods_id,
          goods_name,
          goods_price,
          goods_small_logo
        } = this.detail
        // 没有， 加入新的
        this.carts.push({
          goods_id,
          goods_name,
          goods_price,
          goods_small_logo,
          goods_count: 1,
          // 默认选中
          goods_checked: true
        })

      } else {
        // 有=》数量加一
        good.goods_count++
      }

      // // 存储本地
      // uni.setStorageSync("carts", this.carts)
      uni.showToast({
        title: '加入成功',
        duration: 2000
      })
    },
    goCart () {
      uni.switchTab({
        url: "/pages/cart/index"
      })
    },
    createOrder () {
      uni.navigateTo({
        url: "/pages/order/index"
      })
    },
    changeVuex () {
      this.$store.commit('cart/updateValue', Math.random())
    }
  }
};
</script>

<style scoped lang="scss">
.wrapper {
  margin-bottom: 100rpx;
  background-color: #f4f4f4;
}

.pics {
  height: 640rpx;
}

.meta {
  height: 250rpx;
  line-height: 1;
  padding: 30rpx 180rpx 30rpx 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;

  .price {
    font-size: 36rpx;
    color: #ea4451;
    margin-bottom: 20rpx;
  }

  .name {
    color: #333;
    line-height: 1.4;
    font-size: 33rpx;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .shipment {
    font-size: 27rpx;
    color: #999;
    position: absolute;
    bottom: 30rpx;
  }

  .collect {
    width: 140rpx;
    height: 88rpx;
    text-align: center;
    box-sizing: border-box;
    border-left: 1rpx solid #ddd;
    font-size: 24rpx;
    color: #999;

    position: absolute;
    right: 10rpx;
    top: 91rpx;
  }

  [class*='icon-']::before {
    display: block;
    font-size: 45rpx;
    margin-bottom: 10rpx;
  }
}

.detail image {
  width: 100%;
  height: 480rpx;
  margin-top: 20rpx;
}

.action {
  width: 100%;
  height: 98rpx;
  background-color: #fff;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  align-items: center;

  text {
    display: block;
  }

  .add-count {
    position: absolute;
    top: -16rpx;
    left: 252rpx;
    font-size: 28rpx;
    background-color: #ea4451;
    color: #fff;
    width: 50rpx;
    height: 50rpx;
    border-radius: 50rpx;
    line-height: 50rpx;
    text-align: center;
  }

  .add,
  .buy {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 210rpx;
    text-align: center;
    font-size: 27rpx;
    color: #fff;
  }

  .add {
    background-color: #f4b73f;
  }

  .buy {
    background-color: #ea4451;
  }

  button {
    padding: 0;
    border-radius: 0;
    background-color: #fff;

    &::after {
      border: none;
    }
  }

  button,
  .cart {
    flex: 1;
    text-align: center;
    color: #989898;
    font-size: 24rpx;
    box-sizing: border-box;
  }

  [class*='icon']::before {
    display: block;
    font-size: 45rpx;
    margin-bottom: 2rpx;
  }
}
</style>
